<template>
  <div class="nav_bar" v-if="currentEnvironment=='dingding'">
  </div>
  <div class="nav_bar" v-else>
    <van-nav-bar :left-text="leftText" :title="appTitle" :left-arrow="leftArrow" fixed placeholder @click-left="currentEnvironment!='iwork'?clickLeft():''"
      @click-right="onClickRight">
      <template #left v-if="currentEnvironment=='iwork'">
        <div>
          <img src="~@/assets/img/routerBack.png" alt="" class="routerBack" @click="clickLeft">
          <img src="~@/assets/img/appClose.png" alt="" class="leftPng" @click="closeIworApp" style="margin-left:0.27rem">
        </div>
      </template>
      <template #right>
        <van-popover v-if="rtitle=='...'" v-model="showPopover" :offset='[12,8]' placement="bottom-end" trigger="click" :actions="actions" @select="onSelect">
          <template #reference>
            <div style='font-size:0.24rem;position:relative;bottom:0.08rem'>{{ rtitle }}</div>
          </template>
        </van-popover>
        <div v-else style="color: rgb(24, 144, 255);">{{ rtitle }}</div>
        <van-icon :name="rname" size="18" :color="rColor" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import * as dd from "dingtalk-jsapi";
export default {
  name: "Navbar",
  props: {
    isGoHistory: {
      type: Boolean,
      default: true,
    },
    rightShow: {
      type: Boolean,
      default: false,
    },
    leftText: {
      type: String,
      default: "",
    },
    appTitle: {
      type: String,
      default: "ERP",
    },
    rtitle: {
      type: String,
      default: "",
    },
    rname: {
      type: String,
      default: "",
    },
    rColor: {
      type: String,
      default: "",
    },
    right: {
      type: String,
      default: "",
    },
    actions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    leftArrow:{
      type: Boolean,
      default: true,
    }
  },

  watch: {
    right(newVal) {
      let that = this;
      dd.biz.navigation.setRight({
        // backgroundColor : "#ADD8E6",
        // textColor : "#ADD8E611",
        show: this.rightShow, //控制按钮显示， true 显示， false 隐藏， 默认true
        control: true, //是否控制点击事件，true 控制，false 不控制， 默认false
        text: newVal, //控制显示文本，空字符串表示显示默认文本
        // items:this.items,
        onSuccess: function (result) {
          //如果control为true，则onSuccess将在发生按钮点击事件被回调
          that.$emit("ClickRight");
        },
        onFail: function (err) {},
      });
    },
  },
  data() {
    return {
      showPopover: false,
      currentEnvironment: "",
      timer: null,
    };
  },
  created() {
    this.judgeEn();
    this.GLOBAL.currentEnvironment =
      localStorage.getItem("currentEnvironment") == "dingding";
  },

  mounted() {
    this.$nextTick(() => {
      //使用nextTick为了保证dom元素都已经渲染完毕
      this.$emit("eventGetHeight", this.$el.offsetHeight);
    });
  },
  methods: {
    judgeEn() {
      // console.log("这个方法执行了");
      this.currentEnvironment = localStorage.getItem("currentEnvironment");
      if (this.currentEnvironment) {
        if (this.currentEnvironment == "dingding") {
          dd.ui.webViewBounce.disable();
          dd.biz.navigation.setTitle({
            title: this.appTitle, //控制标题文本，空字符串表示显示默认文本
            onSuccess: function (result) {},
            onFail: function (err) {},
          });
          var that_ = this;
          dd.biz.navigation.setMenu({
            onSuccess: function (data) {},
            onFail: function (err) {},
          });
          dd.biz.navigation.setRight({
            // backgroundColor : "#ADD8E6",
            // textColor : "#ADD8E611",
            show: this.rightShow, //控制按钮显示， true 显示， false 隐藏， 默认true
            control: true, //是否控制点击事件，true 控制，false 不控制， 默认false
            text: this.right, //控制显示文本，空字符串表示显示默认文本
            // items:this.items,
            onSuccess: function (result) {
              //如果control为true，则onSuccess将在发生按钮点击事件被回调
              that_.$emit("ClickRight");
            },
            onFail: function (err) {},
          });
        }
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      } else {
        this.timer = setTimeout(() => {
          this.judgeEn();
        }, 100);
      }
    },
    clickLeft() {
      this.$emit("clickLeft");
      if (this.isGoHistory) {
        this.$router.go(-1);
      }
    },
    onClickRight() {
      this.$emit("ClickRight");
    },
    onSelect(action) {
      this.$emit("clickAction", action.text);
    },
    closeIworApp() {
      var opt = {
        data: "", //回传给上一个页面的参数（字符串），没有则不传
        success: function (data) {}, //成功时回调此方法 },
        fail: function (data) {}, //失败时回调此方法   }
      };
      //插件调用代码
      WorkHelper.closeApp(opt);
    },
  },
};
</script>

<style lang='scss' scoped>
/deep/ .van-nav-bar {
  background-color: #ffffff;
  color: #191f25;
  z-index: 999;
}

/deep/ .van-icon {
  color: #191f25;
}

/deep/ .van-nav-bar__text {
  color: #191f25;
}

/deep/ .van-nav-bar__title {
  color: #191f25;
}
/deep/ .van-popover__content {
  background: red;
  box-shadow: 0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.3);
  border-radius: 2rem;
}
.routerBack {
  width: 0.12rem;
  height: 0.16rem;
}
.leftPng {
  width: 0.16rem;
  height: 0.16rem;
}
</style>
